import dayjs from "dayjs";
import { downloadIamge } from "@/assets/js/common";
import { OnOffDesc } from "@/components/render";

const QrDetail = (props: any) => {
  const { detailData } = props;
  console.log(detailData);

  return (
    <div className="h-full">
      <h2 className="dialog-title">活码详情</h2>
      {props && (
        <div className="flex pb-34">
          {/* 详情左边 */}
          <div className="border-0 border-r-1 border-solid border-grey-200 pt-26 pr-38 pb-38 pl-24 flex items-center flex-col">
            <img src={detailData.qr_code} className="w-140 h-140 mb-16" alt="二维码" />
            <p>{detailData.name}</p>
            <button
              className="bg-blue-default w-160 h-32 mb-12 p-0 cursor-pointer text-white rounded-sm mt-14"
              onClick={(e: any) => {
                downloadIamge(detailData.qr_code, detailData.remark);
              }}>
              下载活码
            </button>
            <a
              href="/dashboard/qr/create?qrId=1758417&amp;corpId=1688103267299678209"
              className="text-white hover:opacity-80 ">
              <button className="border-1 w-160 h-32 border-solid border-grey-300 text-grey-600 bg-white rounded-sm">
                修改
              </button>
            </a>
          </div>

          {/* 详情右边 */}
          <div className="scrollY flex-1 pl-34 pt-14 pr-36 max-h-650 overflow-y-auto">
            {/* 基本设置 */}
            <div>
              <div className="flex justify-start items-center mb-16 ">
                <div className="w-3 h-12 bg-blue-default"></div>
                <span className="ml-4">基本设置</span>
              </div>
              <div className="detail-item-title">
                <span className="item-title">创建时间：</span>
                <span>
                  {detailData.create_time
                    ? dayjs(detailData.create_time).format("YYYY-MM-DD HH:mm")
                    : ""}
                </span>
              </div>
              <div className="detail-item-title">
                <span className="item-title">上线成员：</span>
                <ul className="m-0 flex items-center flex-wrap">
                  {detailData.staffs.map((item: any) => {
                    return (
                      <li
                        key={item.userid}
                        className="bg-grey-100 rounded-2 text-black mr-6 mb-6 py-8 px-12 border-1 border-solid border-blue-acd7ff flex items-center">
                        <img
                          className="inline w-24 h-24 mr-4 align-middle relative"
                          alt=""
                          src={item.avatar}
                          onError={(e: any) => {
                            e.target.onerror = null;
                            e.target.src =
                              "https://wework.qpic.cn/wwhead/duc2TvpEgSTewUnFO43HZ530e6wz9GzZibguRj8LWbN2ZWJsKlN3OdIeeokcKHuLrsntjQ9PN3dM/60";
                          }}
                        />
                        {item.userid}
                      </li>
                    );
                  })}
                </ul>
              </div>
              <div className="detail-item-title">
                <span className="item-title">下线成员：</span> -
              </div>
              <div className="detail-item-title">
                <span className="item-title">员工添加上限：</span>
                <OnOffDesc flag={detailData.day_add_user_limit_enable} />
              </div>
              <div className="detail-item-title">
                <span className="item-title">备用成员：</span>
                <ul className="m-0 flex items-center flex-wrap">
                  <li className="bg-grey-100 rounded-2 text-black mr-6 mb-6 py-8 px-12 border-1 border-solid border-blue-acd7ff flex items-center">
                    <img
                      className="inline w-24 h-24 mr-4 align-middle relative"
                      alt=""
                      src={detailData.backup_staff.avatar}
                      onError={(e: any) => {
                        e.target.onerror = null;
                        e.target.src =
                          "https://wework.qpic.cn/wwhead/duc2TvpEgSTewUnFO43HZ530e6wz9GzZibguRj8LWbN2ZWJsKlN3OdIeeokcKHuLrsntjQ9PN3dM/60";
                      }}
                    />
                    {detailData.backup_staff.name}
                  </li>
                </ul>
              </div>
              <div className="detail-item-title">
                <span className="item-title">自动通过好友：</span> <span>全天开启</span>
              </div>
              <div className="detail-item-title ">
                <span className="item-title">客户标签：</span>
                <ul className="flex items-center flex-wrap m-0">
                  {detailData.auto_mark_tags.map((item: any) => {
                    return (
                      <li
                        key={item.id}
                        className="tag text-xs leading-5 text-grey-800 text bg-grey-100 border-1 border-solid border-grey-200 py-2 px-8 mr-8 mb-8 rounded-2  flex items-center">
                        {item.name}
                      </li>
                    );
                  })}
                </ul>
              </div>
            </div>

            {/* 欢迎语设置 */}
            <div className="mb-12 w-full">
              <div className="flex justify-start items-center mb-16 ">
                <div className="w-3 h-12 bg-blue-default"></div>
                <span className="ml-4">欢迎语设置</span>
              </div>
              <div>
                <span>渠道码欢迎语：</span>

                <div className="bg-grey-100 rounded-sm p-16 mt-4 mb-12">
                  {detailData.auto_reply.text && (
                    <div className="detail-item-title">
                      <span className="item-title">欢迎语1：</span>
                      <span style={{ wordBreak: "break-all", whiteSpace: "pre-wrap" }}>
                        {detailData.auto_reply.text.content}
                      </span>
                    </div>
                  )}
                  {detailData.auto_reply.image && (
                    <div className="detail-item-title">
                      <span className="item-title">欢迎语2：</span>
                      <img
                        alt=""
                        className="w-80 h-80 align-middle"
                        src={detailData.auto_reply.image.url}
                      />
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default QrDetail;
